<template>
  <div>
    <el-form
      :model="loginForm"
      status-icon
      :rules="rules"
      ref="loginForm"
      label-width="100px"
      class="demo-loginForm"
    >
      <el-form-item :label="title" prop="username">
        <el-input v-model.number="loginForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          v-model="loginForm.password"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="图片验证">
        <slide-verify
          ref="slideblock"
          @again="onAgain"
          @success="onSuccess"
          @fulfilled="onFail"
          @fail="onFail"
          @refresh="onFail"
          :slider-text="text"
          :accuracy="accuracy"
        ></slide-verify>
      </el-form-item>
      <!-- <el-checkbox v-model="loginForm.rememberMe" style="margin: 0 0 25px 0">
        记住我
      </el-checkbox> -->
      <el-form-item>
        <el-button
          :loading="loading"
          size="medium"
          type="primary"
          style="width: 70%; float: left"
          @click.native.prevent="dataFormSubmit"
        >
          <span v-if="!loading">登 录</span>
          <el-link type="primary">主要链接</el-link>
          <span v-else>登 录 中...</span>
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// import img0 from 'src/assets/images/imgs/001.jpeg'
// import Cookies from 'js-cookie'
export default {
  name: "in",
  props: ["urlType", "title"],
  data() {
    return {
      cookiePass: "",
      loading: false,
      loginForm: {
        password: "123456",
        username: "20205532",
        verification: false,
        rememberMe: false,
      },
      rules: {
        username: [
          { required: true, trigger: "blur", message: "用户名不能为空" },
        ],
        password: [
          { required: true, trigger: "blur", message: "密码不能为空" },
        ],
      },
      text: "向右滑动->",
      // 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5
      accuracy: 1,
      // imgs:[img0],
      msg: "",
    };
  },
  created() {
    console.log("in++++++++++++++++");
  },
  methods: {
    onSuccess() {
      this.loginForm.verification = true;
    },
    onFail() {
      this.loginForm.verification = false;
    },
    onAgain() {
      alert("检测到非人为操作的哦！");
      this.loginForm.verification = false;
      // 刷新
      // this.$refs.slideblock.reset();
      this.slideblock.reset();
    },

    dataFormSubmit() {
      if (this.loginForm.verification) {
        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            var URLPATH = "";
            if (this.urlType == "student") {
              URLPATH = "/edu-student/login";
            }
            if (this.urlType == "teacher") {
              URLPATH = "/edu-teacher/teacherLogin";
            }
            console.log("************登录访问的地址：", URLPATH);
            this.$http({
              url: this.$http.adornUrl(URLPATH),
              method: "post",
              data: this.$http.adornData(
                {
                  username: this.loginForm.username,
                  pwd: this.loginForm.password,
                },
                false
              ),
            }).then(({ data }) => {
              if (data && data.code === 20000) {
                console.log(data.data.token);
                this.$cookie.set("token", data.data.token); //Bearer
                this.$cookie.set("tokenHead", data.data.tokenHead); //Bearer
                //   this.$cookie.set("token"," data.data.token"); //Bearer
                // this.$cookie.set("tokenHead", "data.data.tokenHead"); //Bearer
                this.$cookie.set("userId", this.loginForm.username);
                this.$cookie.set("userType", this.urlType);
                this.$store.commit("user/updateUserType", this.urlType);
                this.$store.commit("user/updateId", this.loginForm.username);
                // this.$cookie.set("token", "token");

                //根据角色跳转路由
                if (this.$store.state.user.userType == "teacher") {
                  this.$router.replace({ name: "course" });
                }
                if (this.$store.state.user.userType == "student") {
                  this.$router.replace({ name: "student" });
                }
              } else {
                // this.$refs.slideblock.reset();
                this.$message.error("用户名或密码有误");
              }
            });
          }
        });
      } else {
        this.msg = "请验证图片";
        const h = this.$createElement;
        this.$message({
          message: h("p", null, [
            h("span", null, this.msg),
            h("i", { style: "color: teal" }),
          ]),
        });
      }
    },
  },
};
</script>

<style scoped>
</style>
